<template>
  <div class="switch-woa">
    <div class="woa-list-wrap">
      <div v-if="list.length < 1">暂无公众号可以切换</div>
      <div class="woa-item" v-for="item in list" :key="item.appId" @click="handleItemClick(item)">
        <div class="woa-logo">
          <img width="100%" height="100%" :src="item.headImage || qingimg">
        </div>
        <div class="woa-name" >{{item.publicAccountNickname}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import auth from '../util/auth';
// import CONSTANT from '../constant/common';
export default {
  data() {
    return {
      isLogged: auth.isLogged(),
      qingimg: require('./qingke.jpg')
    };
  },
  computed: {
    list() {
      return this.$store.state.woa.woaList || [];
    },
  },
  mounted() {
    if (!this.isLogged) return;
    this.$store.dispatch('getWoaList');
    console.log(this.list, 999)
  },
  methods: {
    handleItemClick(item) {
      if (this.list.length < 2) return;
      this.$confirm('即将切换公众号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '切换成功!',
        });
        console.log('switch item', item);
        // localStorage.setItem(CONSTANT.STORAGE_LOCAL_WOA, JSON.stringify(item));
        this.$store.dispatch('setCurrentWoa', item);
        window.location.reload();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};

</script>
<style lang="less" scoped>
.switch-woa{
  text-align: center;
  width: 800px;
  .woa-list-wrap {
    display: flex;
    flex-wrap: wrap;
    max-height: 640px;
    overflow: auto;
    .woa-item {
      width: 120px;
      height: 150px;
      margin: 10px;
      border: 1px #eee solid;
      .woa-logo {
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .woa-name {
      }
    }
  }
}
</style>
